<template>
  <div>
    <nly-breadcrumb>
      <nly-breadcrumb-item icon="nlyfont nly-icon-home-fill" to="/" text="首页" />
      <nly-breadcrumb-item icon="nlyfont nly-icon-outlet" to="/pingjia" active text="支付记录" />
    </nly-breadcrumb>
    <!-- Main content -->
    <section class="content" style="padding:0px 10px 0px 10px;">
      <div class="flex">
        <i-col :md="6" :sm="12">
          <Input
            v-model="searchText"
            search
            placeholder="根据用户昵称查询记录"
            enter-button="搜索"
            @on-search="search(searchText)"
          />
        </i-col>
      </div>
      <br />
      <Table
        border
        :columns="tableheader"
        :data="datalist"
        :loading="loading"
        @on-selection-change="enterall"
      >
        <template slot-scope="{ row }" slot="avatar">
          <img :src="row.avatar" class="avatar"/>
        </template>
      </Table>
      <br />
      <div class="page">
        <Page
            :total="total"
            show-elevator
            show-total
            :page-size="data.pageSize"
            :current="data.page"
            @on-change="changePage"
          />
      </div>
    </section>
  </div>
</template>

<script>
import category from "@/api/category";
export default {
  components: {},
  data() {
    return {
      loading: true,
      tableheader: [
        {
          title: "昵称",
          key: "nickname",
          align: "center"
        },
        {
          title: "头像",
          slot: "avatar",
          align: "center"
        },
        {
          title: "支付金额",
          key: "o_money",
          align: "center"
        },
        {
          title: "提交时间",
          key: "o_time",
          align: "center",
          width: 330
        },
       
      ],
      total: 0,
      pageNow: 1,
      datalist: [],
      data: {
        nickname: "",
        page: 1,
        pageSize: 10
      },
      searchText: "",
      enteralldata: []
    };
  },
  created() {
    this.lookrecord();
  },
  methods: {
    lookrecord() {
      var _this = this;
      category
        .getpaylist(this.data)
        .then(response => {
          console.log(response);
          if (response.data.code == 200) {
            _this.datalist = response.data.data.depts;
            _this.total = response.data.data.countNumber;
            this.loading = false;
          } else {
            this.$Message.error("请求失败!");
          }
        })
        .catch(error => {
          console.log(error);
          this.loading = false;
          this.$Message.error("请求失败!");
        });
    },
    changePage(val) {
      console.log(val);
      this.data.page = val;
      this.lookrecord();
      this.loading = false;
    },
    search(val) {
      this.data.page = 1;
      let data = this.data;
      data.nickname = val;
      console.log(val);
      this.lookrecord();
    },
    enterall(e) {
      this.enteralldata = e;
      console.log(e);
    },
    remove(id) {
      console.log(id);
      let lid = "";
      if (id) {
        lid = id;
      } else {
        this.enteralldata.map(itme => {
          if (lid == "") {
            lid = itme.fe_id;
          } else {
            lid += "," + itme.fe_id;
          }
        });
      }
      category
        .removerecord({ fe_id: lid })
        .then(response => {
          console.log(response);
          if (response.data.code == 200) {
            this.$Message.success("删除成功");
            this.lookrecord();
          } else {
            this.$Message.error("删除失败!");
          }
        })
        .catch(error => {
          console.log(error);
          this.loading = false;
          this.$Message.error("删除失败!");
        });
    }
  }
};
</script>

<style scoped>
.dataPicker {
  display: inline-block;
  width: 450px;
}
.image {
  max-width: 100%;
  max-height: 100px;
  margin: 10px;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 90px;
  margin: 5px;
}
.page {
  text-align: center;
}
</style>